<template>
  <div class="page8">
    <h2>交付合影</h2>
    <h6>业主满意度<span>高达<numberScroll :value="98.5"></numberScroll>%</span>，装修费用<span>直降<numberScroll :value="30"></numberScroll>%</span></h6>
    <swiper class="wow" loop="true" slidesPerView="auto" :centeredSlides="true" @swiper="onSwiper" @slideChange="onSlideChange">
      <swiper-slide v-for="(item, index) in minList" :key="index">
        <div class="img-wrap">
          <img alt="" :src="item" />
        </div>
        <div class="text">
          <div class="title">
            <div class="left">
              <h5>上坤半岛</h5>
            </div>
            <div class="right">
              <div>
                <i><img src="/src/assets/img/pingfang.png" alt="" /></i>
                <span>300㎡</span>
              </div>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
  
  <script setup>
import { ref } from 'vue'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'

import 'swiper/css'
const onSwiper = (swiper) => {
  console.log(swiper)
}
const onSlideChange = () => {}
const minList = ref([
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg'
])
</script>
  
  <style>
.home .page8 {
  margin-top: 0.99rem;
}

.home .page8 h2 {
  font-size: 0.56rem;
  color: #000;
  font-weight: 700;
  padding-left: 0.3rem;
  opacity: 0;
  animation: slide-down-in 2s, fade-in 1s;
  animation-fill-mode: forwards;
}
.home .page8 h6 {
  padding: 0.3rem;
  font-size: 0.25rem;
  color: #999;
  opacity: 0;
  animation: slide-down-in 2s, fade-in 1s;
  animation-fill-mode: forwards;
}
.home .page8 h6 span {
  color: #db272a;
}
.home .page8 h2 span {
  color: #db272a;
  font-family: Gilroy-Medium;
  display: inline-block;
  width: 1.65rem;
}
.home .page8 .swiper {
  opacity: 0;
  animation: slide-down-in 2s, fade-in 1s;
  animation-fill-mode: forwards;
}

.home .page8 .swiper .swiper-wrapper {
  height: 6rem;
}

.home .page8 .swiper .swiper-slide {
  width: 92% !important;
  margin: 0 4%;
  padding-top: 0.3rem;
}

.home .page8 .swiper .swiper-slide-prev {
  right: -6%;
}

.home .page8 .swiper .swiper-slide-prev .img-wrap {
  transform-origin: right;
  transform: scale(0.85);
}

.home .page8 .swiper .swiper-slide-next {
  left: -6%;
}

.home .page8 .swiper .swiper-slide-next .img-wrap {
  transform-origin: left;
  transform: scale(0.85);
}

.home .page8 .swiper .img-wrap {
  transition: transform 0.3s;
  border-radius: 0.2rem;
  overflow: hidden;
  height: 70%;
  box-shadow: 0 0.13rem 0.3rem 0 hsla(0, 0%, 63.1%, 0.35);
}

.home .page8 .swiper .img-wrap img {
  width: 100%;
  border-radius: 0.2rem;
}

.home .page8 .swiper .text {
  padding: 0.46rem 0.3rem 0;
}

.home .page8 .swiper .text > div {
  display: flex;
}

.home .page8 .swiper .text > div.title {
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.01rem solid #e7e7e7;
  padding-bottom: 0.33rem;
}

.home .page8 .swiper .text > div.title h5 {
  font-size: 0.36rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.25rem;
}

.home .page8 .swiper .text > div.title .right > div {
  display: flex;
  align-items: center;
  font-size: 0.24rem;
  color: #000;
}

.home .page8 .swiper .text > div.title .right {
  position: relative;
  height: 0.56rem;
}
.home .page8 .swiper .text > div.title .right div i {
  width: 0.23rem;
  height: 0.23rem;
  margin-right: 0.15rem;
}

.home .page8 .swiper .text > div.title .right div i img {
  max-width: 100%;
}
</style>